<template>
  <view class="shop" :style="style">
    <view class="shop-left">
      <block v-if="showLeft">
        <slot name="left">
          <tm-sheet :margin="[0, 0]" :padding="[5, 5]" color="blue" :round="round">
            <tm-text :font-size="24" label="秒杀" class="flex flex-center"></tm-text>
          </tm-sheet>
        </slot>
      </block>
    </view>
    <view class="shop-right">
      <block v-if="showRight">
        <slot name="right">
          <tm-sheet :margin="[0, 0]" :padding="[5, 5]" color="orange" :round="round">
            <tm-text :font-size="24" label="推荐" color="white" class="flex flex-center"></tm-text>
          </tm-sheet>
        </slot>
      </block>
    </view>
    <tm-image
      :border="1"
      :extra="true"
      :preview="false"
      :round="round"
      :width="width"
      :height="width"
      :src="src"
    ></tm-image>
    <view class="shop-bottom">
      <block v-if="showBottom">
        <slot name="bottom">
          <tm-sheet :margin="[0, 0]" :padding="[5, 5]" color="green" :round="round">
            <tm-text :font-size="24" label="新人专享" color="white" class="flex flex-center"></tm-text>
          </tm-sheet>
        </slot>
      </block>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import tmImage from '@/tmui/components/tm-image/tm-image.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'

interface ListImgItemProps {
  round?: number
  src: string
  width: number
  height: number
  showLeft?: boolean
  showRight?: boolean
  showBottom?: boolean
}

const props = withDefaults(defineProps<ListImgItemProps>(), {
  round: 2,
  src: '',
  width: 180,
  height: 180,
  showLeft: false,
  showRight: false,
  showBottom: false,
})

const style = computed(() => ({
  width: `${props.width}rpx`,
  height: `${props.height}rpx`,
}))
</script>

<script lang="ts">
export default {
  name: 'ListImgItem',
}
</script>

<style lang="scss" scoped>
.shop {
  position: relative;
  &-left {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-top-left-radius: 10rpx;
  }

  &-right {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    border-top-right-radius: 10rpx;
  }

  &-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
  }
}
</style>
